<template>
    <div class="imgBox" >
        <a class="box" :href="getHref(route)"   @click="goShow(route)" v-for="(i, d) in colors" :key="d" v-show="d == current">
            <img v-if="d == current" :src="i.url" alt="" data-aos="fade" data-aos-duration="1000">
        </a>
        <div class="dot">
            <div @click="getCurrent(d)" :style="{ borderColor: d == current ? i.color : '' }"
                v-for="(i, d) in colors" :key="d">
                <span :style="{ backgroundColor: i.color }"></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'imgSwitch',
    props: {
        colors: {
            type: Array,
            default: () => {
                // return []
                return [{ url: 'http://test2.woyii.com/upload/admin/20250710/bfd2f8595b1b27cd3a997ffdd28936fa.png', color: '#000' },
                { url: 'http://test2.woyii.com/upload/admin/20250714/717ca0c29b92d272797e6224df374ae4.png', color: '#B00D16' }
                ]
            }
        },
        route: {
            type: Object
        }

    },
    data() {
        return {
            current: 0
        }
    },
    methods: {
        goShow(route) {
            
            this.$router.push(route);

        },
        getCurrent(d) {
            this.current = d
        },
        getHref(route) {
            const resolved = this.$router.resolve(route);
            return resolved.href;
        },
    }
}
</script>

<style lang="scss" scoped>
.imgBox {
    width: 100%;
    height: 100%;
    position: relative;

    .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .dot {
        position: absolute;
        bottom: 10px;
        right: 20px;
        display: flex;
        z-index: 2;
        align-items: center;

        >div {
            box-sizing: content-box;
            margin: 0 1px;
            display: block;
            padding: 1px;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                display: block;
                width: 17px;
                height: 17px;
                border-radius: 50%;
            }
        }

    }
}
</style>